<template>
	<view class="invite-wrap full box relative bg-primary p-safe flex column" :style="{'--pt':statusBarHeight_}">
		<view class="fixed-header w-100">
			<view class="fixed-navbar">
				<image src="../static/icon/invite-back.png" class="back-icon" @click="backHandle"></image>
			</view>
			<view class="fixed-image">
				<image :src="sourceUrl + '/invite-bg.png'" mode="aspectFill" class="mask-bg"></image>
				<!-- <view class="desc_btn" @click="handleToDesc">
					<text>规则</text>
				</view> -->
				<image @click="handleToDesc" :src="sourceUrl + '/invite.desc.png'" mode="aspectFill" class="desc_btn" />
			</view>
			<image :src="sourceUrl + '/gift-invite.png'" mode="aspectFill" class="gift-icon"></image>
			<view class="invite-logo">
				<view class="logo-wrap">
					<text>邀请有礼</text>
				</view>
				<view class="invite-desc">
					<text>邀请记录</text>
				</view>
			</view>
		</view>
		<view class="tab-wrapper">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">
				<view class="tab-label">
					<text>{{ item.label }}</text>
				</view>
				<view class="tab-desc">
					<text>{{ item.desc }}</text>
				</view>
			</view>
		</view>
		<view class="relative flex-1 box w-100">
			<view class="absolute inset content-inner">
				<view class="full inner-wrap">
					<swiper class="full" :current="activeTab" @change="swiperChange">
						<swiper-item class="full">
							<view class="first-box">
								<image :src="sourceUrl + '/red-ball.png'" class="red-ball"></image>
								<view class="allready-invite">
									<text>已邀请{{ count }}人</text>
								</view>
								<view class="invite-desc">
									<text>注：邀请好友注册即邀请成功</text>
								</view>
								<button class="invite-btn" open-type="share">
									<text>邀请好友得礼包</text>
								</button>
							</view>
						</swiper-item>
						<swiper-item class="full">
							<view class="second-box full relative">
								<scroll-view class="full" scroll-y>
									<view class="record-item" v-for="(item,index) in list" :key="index">
										<image class="avatar" :src="item.avatar"></image>
										<view class="desc">
											<text class="name">{{ item.nickname }}</text>
											<text class="time">邀请时间：{{ item.invite_time }}</text>
										</view>
									</view>
								</scroll-view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		APP_NAME
	} from '@/constant/index.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		onLoad() {
			if (!this.hasLogin) return uni.showModal({
				title: '温馨提示',
				content: '检测到您还未登录,请登录后再来邀请好友吧!',
				showCancel: false,
				confirmText: '去登录',
				success: ev => uni.navigateTo({
					url: '/pages/login/login'
				})
			})
			this.openWxShare()
		},
		created() {
			this.initData()
		},
		onShareAppMessage() {
			return this.getShareOption()
		},
		methods: {
			handleToDesc() {
				uni.navigateTo({
					url: "/pages-bundle/invite-desc/index"
				})
			},
			async initData() {
				const resp = await this.$request({
					url: "/index/getInviteLog",
					data: {},
				})
				const {
					data
				} = resp
				if (!data.invitee_user) data.invitee_user = []
				if (!data.invite_count) data.invite_count = 0
				this.list = data.invitee_user
				this.count = data.invite_count
				console.log(resp, 'resp');
			},
			getShareOption() {
				const {
					sn
				} = this.userInfo
				return {
					title: APP_NAME,
					path: `/pages/login/login?type=invite&sn=${sn}`
				}
			},
			backHandle() {
				uni.navigateBack()
			},
			swiperChange(ev) {
				this.activeTab = ev.detail.current
			},
			changeTab(v) {
				if (v === this.activeTab) return
				this.activeTab = v
			},
		},
		computed: {
			...mapGetters(['userInfo', 'hasLogin']),
			tabList() {
				return [{
					label: '领取大礼包',
					desc: '火热进行中',
				}, {
					label: '我的奖励',
					desc: '多邀多得',
				}]
			}
		},
		data() {
			return {
				activeTab: 0,
				count: 0,
				list: [],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invite-wrap {
		--nav-height: 88rpx;

		.record-item {
			display: flex;
			margin-bottom: 24rpx;
			padding: 16rpx 0;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.desc {
				display: flex;
				font-size: 32rpx;
				padding-top: 12rpx;
				margin-left: 16rpx;
				flex-flow: column;

				.name {
					color: #666666;
				}

				.time {
					font-size: 26rpx;
					margin-top: 24rpx;
				}
			}
		}


		.inner-wrap {
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			overflow: hidden;

			.first-box {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				flex-flow: column;

				.invite-btn {
					margin-top: 40rpx;
					width: 400rpx;
					height: 84rpx;
					background: linear-gradient(135deg, #8BDCFF 0%, #E4FF68 100%);
					border-radius: 400rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.9);
				}

				.invite-desc {
					height: 32rpx;
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.6);
					line-height: 32rpx;
					margin-top: 16rpx;
				}

				.allready-invite {
					margin-top: 40rpx;
					height: 48rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.9);
					line-height: 48rpx;
				}

				.red-ball {
					width: 288rpx;
					height: 282rpx;
				}

			}
		}

		.content-inner {
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.tab-wrapper {
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			flex-flow: row nowrap;
			box-sizing: border-box;
			position: relative;

			.tab-item {
				flex: 1;
				height: 108rpx;
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;

				.tab-label {
					height: 44rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 44rpx;
				}

				.tab-desc {
					height: 32rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 32rpx;
				}

				&:first-child {
					background: #8BDCFF;
					border-radius: 16rpx 0rpx 0rpx 0rpx;
				}

				&:last-child {
					background: #B09FFE;
					border-radius: 0rpx 16rpx 0rpx 0rpx;
				}
			}
		}

		.fixed-header {
			height: 740rpx;
			width: 100%;
			box-sizing: border-box;
			position: relative;

			.fixed-navbar {
				position: absolute;
				left: 0;
				top: var(--pt);
				right: 0;
				height: var(--nav-height);
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				z-index: 3;

				.back-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}


			.gift-icon {
				position: absolute;
				right: 18rpx;
				bottom: 100rpx;
				width: 376rpx;
				height: 368rpx;
			}

			.fixed-image {
				width: 100%;
				height: 650rpx;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;

				.desc_btn {
					position: absolute;
					right: 74rpx;
					top: 220rpx;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					overflow: hidden;
					background: #c3d3b6;
					color: #ffffff;
					font-weight: bold;
					text-align: center;
				}

				.mask-bg {
					width: 100%;
					height: 100%;
				}
			}

			.invite-logo {
				position: absolute;
				left: 72rpx;
				top: calc(var(--nav-height) + var(--pt) + 16rpx);
				display: flex;
				flex-flow: column;
				align-items: center;

				.logo-wrap {
					font-weight: bold;
					font-size: 92rpx;
					color: #8D73FF;
				}

				.invite-desc {
					height: 56rpx;
					font-size: 40rpx;
					color: #8D73FF;
					font-weight: bold;
					line-height: 56rpx;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>